<script>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { showLoadingToast,showSuccessToast } from 'vant';
import { areaList } from '@vant/area-data';
import { AddAddress } from '../api/index';

export default {
    setup() {
        const searchResult = ref([]);
        const router = useRouter();

        const onSave = (value) => {
            console.log(value);
            AddAddress({
                contactName: value.name,
                contactSex: 1,
                contactTel: value.tel,
                address: value.province +" "+ value.city +" "+ value.county +" "+ value.addressDetail
            })
                .then(function () {
                    showLoadingToast({
                    message: '加载中...',
                    forbidClick: true,
                });
                setTimeout(() => {
                    router.push('/setaddress')
                    showSuccessToast('添加地址成功');
                }, 1000);
                })
                .catch(function (error) {
                    console.log(error);
                });
        };
        const onDelete = (value) => {
            value.name = '';
            value.tel = '';
            value.province = '';
            value.city = '';
            value.county = '';
            value.addressDetail = '';
            value.isDefault = false;
        }

        const onClickLeft = () => router.back();

        return {
            onSave,
            onDelete,
            areaList,
            searchResult,
            onClickLeft
        };
    },
};
</script>

<template>
    <div class="">
        <van-nav-bar title="新增地址" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-address-edit :area-list="areaList" show-delete show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete" @change-detail="onChangeDetail" delete-button-text="清空">
            
        </van-address-edit>


    </div>
</template>

<style lang="scss" scoped></style>
